<template>
  <div class="app-container statistic_table">
    <div class="statistic_table_factor">
      <el-card class="statistic_table-card">
        <div slot="header" class="statistic_table-header">
          <el-checkbox v-model="szChecked" label="水质数据报表"></el-checkbox>
          <el-button style="float: right; padding: 3px 0" type="text">报表导出</el-button>
        </div>
        <img src="@/assets/images/sz.jpg" class="statistic_table_img">
        
      </el-card>

      <el-card class="statistic_table-card">
        <div slot="header" class="statistic_table-header">
         <el-checkbox v-model="jcChecked" label="监测数据报表"></el-checkbox>
          <el-button style="float: right; padding: 3px 0" type="text">报表导出</el-button>
        </div>
        <img src="@/assets/images/sz.jpg" class="statistic_table_img">
      </el-card>
      <el-card class="statistic_table-card">
        <div slot="header" class="statistic_table-header">
          <el-checkbox v-model="xmChecked" label="项目数据报表"></el-checkbox>
          <el-button style="float: right; padding: 3px 0" type="text">报表导出</el-button>
        </div>
        <img src="@/assets/images/sz.jpg" class="statistic_table_img">
      </el-card>
      <el-card class="statistic_table-card">
        <div slot="header" class="statistic_table-header">
          <el-checkbox v-model="drjChecked" label="地热井数据报表"></el-checkbox>
          <el-button style="float: right; padding: 3px 0" type="text">报表导出</el-button>
        </div>
        <img src="@/assets/images/sz.jpg" class="statistic_table_img">
      </el-card>

    </div>
    <div class="statistic_table_sub">
      <el-button type="primary" plain>导出勾选</el-button>
    </div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      szChecked:true,
      jcChecked:true,
      xmChecked:true,
      drjChecked:false,
      instant_flow: 0,
      instant_reflow: 50,
      total_flow: 36,
      total_reflow: 48,
      water_temperature: 42,
      water_retemperature: 42,
      water_level: 42,
      water_relevel: 42,
    }
  },
  methods: {
    formatTooltip(val) {
      return val;
    }
  }
}
</script>
<style lang="scss" scoped>
.statistic_table {
  padding: 10px 24px;
  display: flex;
  flex-direction:row;
  .statistic_table_factor {
    display: flex;
    justify-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 30px;
    .statistic_table-card {
      margin-right: 20px;
      margin-bottom: 10px;
      width: 40%;
      .statistic_table-header:before,
      .statistic_table-header:after {
        display: table;
        content: "";
      }
      .statistic_table-header:after {
        clear: both;
      }
      .statistic_table_img {
        width: 100%;
      }
    }
  }
  .statistic_table_sub {
    margin: 0 auto;
  }
}
</style>